<template>
    <div>
        <!--搜索框-->
        <div class="search-box">
            <div class="search-input-box">
                <img src="../../assets/img/search.png" class="search-img">
                <input class="keyword main-color" placeholder="请输入关键词" v-model="keyword">
            </div>
            <mt-button class="background white-color" size="small" @click="getKeywordFun">搜索</mt-button>
        </div>
        <!--筛选-->
        <div class="pick-box">
            <div class="pick-chose white-color dark-background">
                <template v-for="(item,index) in pickList">
                    <div :key="item.id"
                         @click="pickClick(item,index)"
                         :class=" index == pick_index?'active-pick background':''"
                    >{{item.name}}
                    </div>
                </template>
            </div>
        </div>
        <!--商品列表-->
        <div class="goods-list-box" :style="GetWindowHeight">
            <div class="shop_wrap">
                <ul>
                    <li class="shopList" v-for="(item,index) in goodsList" :key="index">
                        <div class="shop_title">
                            <ul>
                                <li v-for="(items,index) in item.list" :key="index">
                                    <img :src="items.imgUrl"/>
                                    <div class="goods-content-box">
                                        <div class="goods-info-box">
                                            <div class="main-color big-font-size">{{ items.title }}</div>
                                            <div class="three-color small-font-size">规格：</div>
                                            <div class="three-color small-font-size">重量：</div>
                                            <div class="three-color small-font-size">保存：</div>
                                            <div class="price-color">￥{{items.price}}</div>
                                        </div>
                                        <!--购物车加减号-->
                                        <div class="shop-cart-box">
                                            <div class="shop-cart-button green-color"
                                                 :class="items.num>0?'':'display-none'"
                                                 @click="minusShopCart"
                                                 :data-parentindex="item.parentIndex"
                                                 :data-index="items.index"
                                            >-
                                            </div>
                                            <input type="number" v-model="items.num" class="shop-cart-input"
                                                   :class="items.num>0?'':'display-none'"/>
                                            <div class="shop-cart-button background"
                                                 @click="addShopCart"
                                                 :data-parentindex="item.parentIndex"
                                                 :data-index="items.index"
                                            >+
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <div class="seize-seat">-- 没有数据了 --</div>
                </ul>
            </div>
        </div>
        <!--底部按钮操作框-->
        <div class="bottom-content-box dark-background">
            <div class="bottom-img-box"
                 @click="shopCartShow"
            >
                <img src="../../assets/img/cart.png" class="cart-img">
                <div class="number">{{allShopCartCount}}</div>
            </div>
            <div class="bottom-price-box"
                 @click="shopCartShow"
            >
                <div class="price">￥{{allShopCartPrice}}</div>
                <div class="des light-color">运费以实际情况为准</div>
            </div>
            <router-link
                    to="/ShopSetOrder"
                    class="settle-accounts background">
                去结算
            </router-link>
        </div>
        <!--底部购物车弹框-->
        <mt-popup
                v-model="popupVisible"
                position="bottom"
                class="bottom-shop-cart-box"

        >
            <div class="shop-top-box">
                <div>已选</div>
                <div @click="emptyShopCartFun">清空</div>
            </div>
            <div class="shop-cart-type">{{pick_index==0?'总部直供':'门店自采'}}</div>
            <ul class="shop-cart-list">
                <li v-for="(item, index) in shopCartArray"
                    :key="index"
                >
                    <img :src="item.imgUrl" class="cart-img">
                    <div class="shop-cart-content">
                        <div class="main-color big-font-size">{{item.title}}</div>
                        <div class="price-color">￥{{item.price}}</div>
                    </div>
                    <!--购物车加减号-->
                    <div class="shop-cart-box">
                        <div class="shop-cart-button green-color"
                             @click="minusShopCart"
                             :data-parentindex="item.parentIndex"
                             :data-index="item.index"
                        >-
                        </div>
                        <input type="number" v-model="item.num" class="shop-cart-input"/>
                        <div class="shop-cart-button background"
                             @click="addShopCart"
                             :data-parentindex="item.parentIndex"
                             :data-index="item.index"
                        >+
                        </div>
                    </div>
                </li>
            </ul>
        </mt-popup>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        name: "shopSearch",
        data() {
            return {
                pick_index: 0, //筛选的索引
                pick_id: 1, //筛选的id
                pickList: [{id: 1, name: '直供'}, {id: 2, name: '自采'}],
                keyword: '',
                GetWindowHeight: {//列表的高度
                    'height': ''
                },
                popupVisible: false,//底部购物车弹框是否显示
                goodsList: [], //商品数据
                shopCartArray: [],//购物车
                allShopCartCount: 0,
                allShopCartPrice: 0,
            }
        },
        mounted() {
            this.getlocalStorageFun();
            this.getGlobalData();
        },
        computed: {},
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getHeight) // 注册监听器
            this.getHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getHeight)
        },
        methods: {
            //从全局变量中拿基础数据
            getGlobalData() {
                var state = this.$store.state
                this.pick_index=state.purchaseType
                var $thisShopCart = this.pick_index == 0 ? state.shopCartObj.headquarters : state.shopCartObj.selfMining;//获取加购的是哪个采购方式--即确认供货商
                this.goodsList = state.goodsList;//商品列表
                this.shopCartArray = $thisShopCart.shopCartArray;//购物车
                this.allShopCartCount = $thisShopCart.allShopCartCount;//购物车商品总数
                this.allShopCartPrice = $thisShopCart.allShopCartPrice;//购物车商品总金额
                this.isSameWare = $thisShopCart.isSameWare;//是相同的仓库吗
                if (!this.isSameWare) {
                    Toast('常温仓和冷冻仓不可以同时加购！');
                }
                var data={
                    "shopCartObj":state.shopCartObj,
                    "goodsList":state.goodsList,
                    "purchaseType":this.pick_index,
                }
                localStorage.setItem('localData',JSON.stringify(data));
            },
            //获取缓存数据，并赋值
            getlocalStorageFun(){
                var localData=JSON.parse(localStorage.getItem('localData'));
                if(localData){
                    this.$store.state.shopCartObj=localData.shopCartObj
                    this.$store.state.goodsList=localData.goodsList
                    this.$store.state.purchaseType=localData.purchaseType
                }
            },
            //加-购物车
            addShopCart(e) {
                let index = e.srcElement.dataset.index;
                let parentIndex = e.srcElement.dataset.parentindex;
                this.$store.commit('AddShopCartGlobalFun', {parentIndex, index})
                this.$store.commit('allShopCartPrice')
                this.getGlobalData();
            },
            //减-购物车
            minusShopCart(e) {
                let index = e.srcElement.dataset.index;
                let parentIndex = e.srcElement.dataset.parentindex;
                this.$store.commit('minusShopCartGlobalFun', {parentIndex, index})
                this.$store.commit('allShopCartPrice')
                this.getGlobalData();
                if (this.shopCartArray.length == 0) {
                    this.popupVisible = false
                }
            },
            //显示/隐藏购物车
            shopCartShow() {
                var shopCartLen = this.shopCartArray.length;
                if (shopCartLen == 0) { //购物车为空
                    Toast('您还没有加购哟！');
                    return
                }
                this.popupVisible = true
            },
            //清空购物车
            emptyShopCartFun() {
                this.popupVisible = false
                this.$store.commit('emptyShopCartFun')
                this.getGlobalData();
            },
            //搜索
            getKeywordFun() {
                let keyword = this.keyword;
                console.log(keyword)
            },
            //选择类型
            pickClick: function (item, index) {
                this.pick_index = index;
                this.pick_id = item.id;
                var state = this.$store.state;
                state.purchaseType = index   //0:总部直供  1：门店自采
                this.getGlobalData()
            },
            getHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowHeight.height = window.innerHeight - 75 - 40 - 70 + 'px'
            },
        },
    }
</script>

<style lang="scss" scoped>

    .search-box {
        width: 80%;
        height: 35px;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search-input-box {
            width: 80%;
            height: 35px;
            border-radius: 6px;
            background: #f8f7fc;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .search-img {
            width: 16px;
            height: 16px;
            margin-left: 20px;
        }
        .keyword {
            font-size: 14px;
            padding: 5px 10px;
            background: transparent;
            border: none;
            outline: none;
            list-style: none;
        }

    }

    .pick-box {
        width: 100%;
        height: 26px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 13px;
        margin: 10px 0;
        .pick-chose {
            width: 90px;
            padding: 2px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            border-radius: 6px;
            margin-right: 20px;
        }
        .pick-chose div {
            width: 45px;
            height: 22px;
            line-height: 22px;
            border-radius: 6px;
        }
        .active-pick {
            width: 60px;
            color: #fff;
        }
    }

    /*商品列表*/
    .goods-list-box {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 500px;
        overflow-y: auto;
        .shop_wrap {
            width: calc(100% - 40px);
            overflow-x: hidden;
            overflow-y: scroll;
            padding: 0 20px;

            .shop_title {
                & > ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                }
                & > ul > li {
                    width: 100%;
                    height: 100px;
                    /*border: 1px solid red;*/
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    position: relative;
                    img {
                        width: 83px;
                        height: 85px;
                        border-radius: 12px;
                        margin-right: 10px;
                    }
                    .goods-content-box {
                        display: flex;
                        flex-direction: column;
                        width: calc(100% - 95px);
                        text-align: left;
                    }
                    .goods-info-box {
                        padding-left: 5px;
                    }

                }
            }
        }
    }

    /*底部*/
    .bottom-content-box {
        width: calc(100% - 20px);
        height: 50px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 2021;
        border-radius: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        .settle-accounts {
            width: 82px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
            margin-left: auto;
            margin-right: 6px;
            font-size: 15px;
            color: #fff;
        }
        .bottom-img-box {
            width: 25px;
            height: 25px;
            position: relative;
            margin: 0 28px 0 10px;
            .number {
                min-width: 10px;
                min-height: 14px;
                text-align: center;
                font-size: 12px;
                color: #fff;
                border-radius: 8px;
                position: absolute;
                top: -6px;
                right: -10px;
                background: #ff5555;
                padding: 1px 3px 0 3px;
            }
        }
        .bottom-price-box {
            display: flex;
            flex-direction: column;
            .price {
                font-size: 18px;
                margin-right: auto;
            }
            .des {
                font-size: 10px;
                padding-left: 3px;
            }
        }
    }

    /*底部购物车弹框*/
    .bottom-shop-cart-box {
        width: calc(100% - 40px);
        min-height: 80px;
        max-height: 380px;
        padding: 0 20px 70px 20px;
        .shop-top-box {
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            letter-spacing: 1px;
            font-size: 15px;
        }
        .shop-cart-type {
            width: 100%;
            line-height: 35px;
            text-align: left;
            font-size: 14px;
        }
        .shop-cart-list {
            width: 100%;
            max-height: 305px;
            overflow-y: auto;
            margin-bottom: 10px;
            li {
                width: 100%;
                display: flex;
                padding: 5px 0;
                position: relative;
                .cart-img {
                    width: 50px;
                    height: 50px;
                    border-radius: 12px;
                }
                .shop-cart-content {
                    padding-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    text-align: left;
                }
            }
        }
    }
</style>